<template>
  <el-checkbox-group v-model="internalValue" v-on="$listeners" v-bind="$attrs">
    <template v-if="$attrs.isButton">
      <el-checkbox-button
        v-for="option in options"
        :key="option.value"
        :label="option.value">
        {{ option.label }}
      </el-checkbox-button>  
    </template>
    <template v-else>
      <el-checkbox
        v-for="option in options"
        :key="option.value"
        :label="option.value">
        {{ option.label }}
      </el-checkbox>
    </template>
  </el-checkbox-group>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    },
    options: {
      type: Array,
      default: () => [],
    },
  },
  created() {
    
  },
  data() {
    return {
      internalValue: this.value,
    };
  },
  watch: {
    value(newVal) {
      this.internalValue = newVal;
    },
  },
};
</script>
<style lang="less" scoped>
    .el-checkbox-button {
    margin-right: 3px;
  }
  /deep/.el-checkbox-button.is-checked .el-checkbox-button__inner {
    color: #fff;
    height: 28px;
    background: rgba(48, 158, 255, 0.50);
    border: 1px solid rgba(48, 158, 255, 0.50);
    box-shadow: 0px 0 0 0 #409EFF;
  }
  /deep/.el-checkbox-button--small .el-checkbox-button__inner {
    height: 28px;
    background: rgba(143,171,191,0.1);
    border: 1px solid rgba(143, 171, 191, 0.10);
  }
  /deep/.el-checkbox-button:first-child .el-checkbox-button__inner {
    border-radius: 0;
  }
  /deep/.el-checkbox-button:last-child .el-checkbox-button__inner {
    border-radius: 0;
  }
  /deep/.el-checkbox-button--small .el-checkbox-button__inner {
    padding: 7px 15px;
  }
  /deep/.el-checkbox-button.is-checked .el-checkbox-button__inner {
    box-shadow: none;
  }
</style>